{% extends 'base.html' %}
{% load static %}


{% block meta %}
    <meta name="keywords" content="python+django搭建自己的博客,搭建博客" charset="utf-8"/>
    <meta name="description" content=" python+django搭建自己的博客,搭建博客" charset="utf-8"/>
{% endblock %}

{% block mycss %}
    <style>
        ul, li {
            list-style: none;
        }
    </style>
{% endblock %}

{% block content %}
    <script type="text/javascript">
        $(function () {
            let img = $(".article-top-3-thumbnail > img")
            let w = img.width();
            let h = img.height();
            let w2 = w + 20;
            let h2 = h + 20;

            img.hover(function () {
                $(this).stop().animate({ height: h2, width: w2, left: "-10px", top: "-10px" }, 400);
            }, function () {
                $(this).stop().animate({ height: h, width: w, left: "0px", top: "0px" }, 400);
            });
        });
    </script>
    <div class="article-top-3" data-scroll-reveal="enter top">
        {% for figure_article in figure_articles  %}
            <div class="article-top-3-item">
                <div class="article-top-3-thumbnail-frame" >
                    <div class="article-top-3-thumbnail">
                        <img src="{{ figure_article.cover_url  }}"/>
                    </div>
                </div>

                <p style="text-align: center; margin-top: 10px">
                    <a href="/articles/p/{{ figure_article.article_id }}.html" style="color: rgba(52, 73, 94, 0.94); font-weight: bolder; font-size: 14px">
                        {{ figure_article.title }}
                    </a>
                </p>
                <div class="article-description" style="margin-left: 5px">
                    {{ figure_article.abstract }}
                </div>
            </div>
        {% endfor %}
    </div>
    <div>
        {% for article in articles %}
            {% include "article_list.html" %}
        {% endfor %}
    </div>

    <div class="pages">
        <a class="prev-page"><</a>
        <a class="next-page">></a>
        <label id="total-pages" style="margin-left: 0; margin-top: 6px">共{{total_pages}}页</label>
    </div>

    <script>
        var screenWidth = getWidth();
        console.log("screenWidth=" + screenWidth)
        let totalPages = parseInt({{ total_pages }});
        let curPage = parseInt({{ page }})

        /*分页处理太麻烦了，简单粗暴的方法往往更有效*/
        let idx = 1
        if (curPage <= 10) {
            idx = 1
        } else if (curPage <= 21) {
            idx = 11
        } else if (curPage <= 31) {
            idx = 21
        }
        for (let i = idx; i <= totalPages && i < idx + 10; i++) {
            let obj = $('<a href="#">' + i + '</a>').insertBefore($('.next-page'))
            console.log(obj.text())
            if (i === curPage) {
                obj.addClass('active');
            }
            obj.attr('href', '/?page=' + i)
        }

        if (curPage === 1) {
            $('.prev-page').addClass('hidden')
        } else if (curPage === totalPages) {
            $('.next-page').addClass('hidden')
        }
        $('.pages > a').unbind('click').click(function (){
            let text = $(this).text()
            if (text === '<') {
                window.location.href = "/?page=" + (curPage - 1)
            } else if (text === '>') {
                window.location.href = "/?page=" + (curPage + 1)
            } else {
                let pageId = parseInt($(this).text());
            }
        })
        // 小于1也的时候不显示< >
        if (totalPages <= 10) {
            $('#total-pages').css('visibility', 'hidden')
            $('.prev-page').css('visibility', 'hidden')
            $('.next-page').css('visibility', 'hidden')
        }
        // 小于2页的时候不显示分页
        if (totalPages < 2) {
            $('.pages').css('visibility', 'hidden')
        }
        $(document).ready(function(){
            let screenWidth = getWidth()
            $(".article-top-3-article-pic").each(function (){
                {#image_download_and_set($(this).attr("id"), "/articles/d_icon/?title=" + $(this).attr("title"))#}
            })
            $(".article-pic").each(function() {
                {#image_download_and_set($(this).attr("id"), "/articles/d_icon/?title=" + $(this).attr("title"))#}
            })
        })
    </script>
{% endblock %}



